<script setup lang="ts">

</script>

<template>
   <header class="login-header">
      <div class="container">
         <h1 class="logo">
            <RouterLink to="/">小兔鲜</RouterLink>
         </h1>
         <h3 class="sub">
            <slot></slot>
         </h3>
         <RouterLink class="entry" to="/">
            <a>进入网站首页</a>
            <i class="iconfont icon-angle-right"></i>
            <i class="iconfont icon-angle-right"></i>
         </RouterLink>
      </div>
   </header>
</template>

<style scoped lang="less">
.login-header {
   background: #fff;
   border-bottom: 1px solid #e4e4e4;

   .container {
      display: flex;
      align-items: center;
      justify-content: space-between;

   }

   .logo {
      width: 200px;

      a {
         display: block;
         height: 132px;
         width: 100%;
         text-indent: -9999px;
         background: url("../../../../assets/images/logo.png") no-repeat center 18px / contain;
      }
   }

   .sub {
      flex: 1;
      font-size: 24px;
      font-weight: normal;
      color: #666;
      margin-left: 10px;
   }

   .entry {
      width: 120px;
      font-size: 16px;

      i {
         font-size: 14px;
         color: @xtxColor;
         letter-spacing: -5px;
      }
   }
}
</style>
